<template>
  <div id="home">


    <div id="daohang">
      <el-image
          style="width: 100px; height: 100px;margin-top: 50px"
          :src="this.user.pic"
      ></el-image>
      <h2 style="color: azure">欢迎您 {{user.username}}</h2>

      <el-col :span="12" style="width: 100%;height: 500px;">
        <el-menu
            default-active="3"
            class="el-menu-vertical-demo"
            background-color="#2c3e50"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="border-right: #2c3e50">
          <el-menu-item index="1" @click="toCar()" style="width: 100%;float:left;">
            <i class="el-icon-menu" ></i>
            <span slot="title">车辆信息</span>
          </el-menu-item>
          <el-menu-item index="2" @click="toUser()" style="width: 100%;float:left;">
            <i class="el-icon-menu"></i>
            <span slot="title">个人信息</span>
          </el-menu-item>
          <el-menu-item index="3" style="width: 100%;float:left;">
            <i class="el-icon-menu"></i>
            <span slot="title">还款信息</span>
          </el-menu-item>
          <el-menu-item index="4" @click="toShen()" v-show="this.user.roleCode==4 || this.user.roleCode==5 || this.user.roleCode==6" style="width: 100%;float:left;">
            <i class="el-icon-menu"></i>
            <span slot="title">审核模块</span>
          </el-menu-item>
          <el-menu-item index="5" style="width: 100%;float:left;">
            <i class="el-icon-setting"></i>
            <span slot="title">系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </div>
    <div id="addP">
      <el-table
          :data="page"
          style="width: 100%">
<!--        <el-table-column-->
<!--            prop="id"-->
<!--            label="编号">-->
<!--        </el-table-column>-->
        <el-table-column
            prop="carName"
            label="贷款商品名称">
        </el-table-column>

        <el-table-column
            prop="price"
            label="还款总金额">
        </el-table-column>
        <el-table-column
            prop="type"
            label="还款期数">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="detailsy(scope.row)" >还款明细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  data(){
    return{
      user:{},
      page:{
        name:"宝马",
      },
      out_trade_no:'',
      dialogTableVisible:false,
      gridData: []
    }
  },
  methods:{

    // 还款明细
    detailsy(row){
      // console.log(this.row.checkCode)
      // debugger
      // this.axios.get(`http://localhost:8080/repay/repay/repaymentDetailsList?checkCode=${row.checkCode}`).then(res => {
      //   if (res.data.code == 200) {
      //     this.gridData = res.data.data;
      // console.log(row.checkCode);
          this.$router.push({name:"details",params:{checkCode:row.checkCode}})
      //   }
      // })
    },
    // 还款页面
    // pay(row){
    //   this.axios.post(`http://localhost:8080/repay/repay/add?id=${row.id}`).then(res=>{
    //     if (res.data.code==200){
    //       // console.log(res.data.data.outTradeNo)
    //       // console.log(res.data.data.name)
    //       // console.log(res.data.data.repaymentPrice)
    //       this.$router.push({name:"Pay",params:{name:row.name,outTradeNo:res.data.data.outTradeNo,repaymentPrice:row.repaymentPrice}})
    //     }
    //   })
    // } ,

    // 查询还款信息
    initData(){
      this.axios.post(`repay/repay/repayList?userInfoCode=`+this.user.code).then(res=>{
        this.page=res.data.data;
      })
    },
    //进入个人信息页面
    toUser(){
      this.$router.push("/personaldetails")
    },
    //进入申请贷款页面
    toRepayment(){
      this.$router.push("/addrepayment")
    },
    //进入审核页面
    toShen(){
      this.$router.push("/check")
    },
    //进入车辆信息页面
    toCar(){
      this.$router.push('/loanshome')
    },

  },
  created() {
    // 1、得到支付成功后，页面跳转url中的订单编号
    this.out_trade_no = this.$route.query.out_trade_no
    // 2、获取订单号之后，查询后台支付宝查询订单接口，根据支付状态，修改后台订单状态
    this.axios.get('repay/repay/query?out_trade_no='+this.out_trade_no).then((res)=>{
      console.log(res)
      this.initData();
    })
    this.initData();
// 获取数据
    const data = JSON.parse(localStorage.getItem('user'));
    //赋值然后显示登陆人
    this.user = data
  }
}
</script>

<style>

#home{
  width: 100%;
  height: 815px;
  background-color: rgba(152, 134, 134, 0.18);
  box-sizing: border-box;
}



#daohang{
  width: 18%;
  height: 97%;
  background-color: #2c3e50;
  margin-left: 12px;
  margin-top: 10px;
  float: left;
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
#addP{
  width: 79%;
  height:  97%;
  margin-top: 10px;
  margin-right: 12px;
  float: right;
  background-color: rgb(255, 255, 255);
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
  padding: 15px;
  box-sizing: border-box;
}

</style>
